<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>遥测-实时</title>
  <link rel="stylesheet" href="/static/css/bootstrap.min.css">
  <link rel="stylesheet" href="/static/css/font-awesome.min.css">
  <link rel="stylesheet" href="/static/css/style.css">
  <link rel="stylesheet" href="./../qv.css">
  <!--  <script src="/static/js/echarts.5.5.js"></script>-->

  <script src="/static/js/echarts.4.9.js"></script>
  <style>

    .form-select{
      display: unset;
      width: unset;
    }
    :root{
      --margin-lf: 10px;
    }
    * {
      line-height: 1;
      padding: 0;
      margin: 0;
    }
    .btn{
      line-height: 1;
    }

    #result td {
      text-align: left;

    }
    tr:nth-child(1)
  </style>
</head>
<body style="background-color: #fff !important;">

<div style="padding: 4px 6px;border-bottom: 1px solid gray;">
  <button class="btn btn-primary btn-sm disactive-btn" id="realtime" disabled>实时</button>
  <button class="btn btn-primary btn-sm mx-1" onclick="main.history()" id="history">历史</button>
  <label for="packages">遥测包:</label>
  <select id="packages" onchange="main.onPackage()" class="form-select form-select-sm"></select>
  <label id="task"></label>
</div>
<div id="rst-time" class="pb-2" style="padding: var(--margin-lf)"></div>
<!--right: var(&#45;&#45;margin-lf);-->
<div style="position: absolute;top: 90px;bottom: 10px;left: var(--margin-lf);overflow: auto;">
    <table class="table table-sm table-bordered small" >
      <colgroup>
        <col style="min-width: 80px">
        <col style="min-width: 300px">
        <col style="min-width: 200px">
        <col style="min-width: 100px">
      </colgroup>
      <thead>
        <tr>
          <th>Code</th>
          <th>名称</th>
          <th>值</th>
          <th>原码</th>
        </tr>
      </thead>
      <tbody id="result" >

      </tbody>
    </table>
</div>
<script src="/static/js/jquery-3.6.0.min.js"></script>
<script src="/static/js/xtool.js"></script>
<script src="./../qv.js"></script>
<script src="index.js"></script>
<script>

  var main;
  async function loadPkgMeta(pid) {
      let q = await fetch(pid + '.json').then(v => v.json())
      return new PKGS(q);
  }
  function showgrid(e){
    let data=JSON.parse(e.data);
    let keys = current_packages.keys;
    let values = keys.reduce((acc,i)=> { acc.push(data[i]);return acc;},[data['time']])
    let pkg = new PKG(current_packages.par, ['time',...keys], values)
    $ret_time.html('包时间:'+U2T(pkg.time))
    $ret.html(pkg.grid(keys))
  }


    class XPage extends Realtime{
      constructor(vid, packages) {
        super(vid, getStation());
        this.packages = packages
        this.$ret_time = $('#rst-time')
        this.$ret = $('#result');
        this.$task.value = ''
      }

      async onPackage() {
        let pkg = $pkg.val()
        this.clearContent()
        this.packages = await loadPkgMeta(pkg)
        this.key = pkg
        this.connect()
      }
      history() {
        window.location.href = `index.html?t=${this.$task.value}&vid=${$pkg.val()}`
      }

      async load_task(day, reset) {

      }

      clearContent() {
        this.$ret_time.html('')
        this.$ret.html('')
        this.$task.textContent=''
        this.$task.value = ''
      }
      realtime() {
        this.clearContent()
        super.realtime();
      }

      async newtask(d) {
        let task = new Task(d.task)
        this.$task.value = d.task
        this.$task.textContent = `任务: ${task.label}`
      }
      newframe(d) {
        this.showtable(d)
      }
      showtable(data) {
        let keys = this.packages.keys;
        let values = keys.reduce((acc, i) => {
          acc.push(data[i]);
          return acc;
        }, [data['time']])

        let pkg = new PKG(this.packages.par, ['time', ...keys], values)
        this.$ret_time.html('包时间:' + U2T(pkg.time))
        let trs = []
        keys.forEach(k => {
          if (k in pkg.input) {
            let p = pkg.par[k]
            let v = pkg.V(k)
            let st = p.RANGE(v) ? '' : 'class="E"'
            trs.push(`<tr ${st}><td>${p.id}</td><td>${p.n}</td><td>${pkg.D(k)}${p.Unit || ''}</td><td>${pkg.R(k)}</td></tr>`)
          }
        })
        this.$ret.html(trs.join(''))
      }
    }



    window.onload = async function () {
      await initPckOptions()
      let defaultVid = $pkg.val()
      let packages = await loadPkgMeta(defaultVid)

      main = new XPage(defaultVid, packages)
      main.realtime()
    }

</script>
</body>
</html>